<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    {$LOAD_STYLE.top|raw}
</head>
<script src="__TPL_JS__/zepto.min.js"></script>
<script src="__TPL_JS__/zepto.weui.js"></script>
<script src="__JS__/clipboard.min.js"></script>

<style>
     body {
        background-color: #EFEFEF;
    }
    a {
        color: inherit;
        text-decoration: none;
    }
    .search-box {
        font-size: 16px;
        background-color: #FFF;
        padding: 10px;
    }
    .search-label {
        width: 70px;
        margin-right: 10px;
        text-align: right;
    }
    .results-container {
        padding: 10px;
    }
    .no-data {
        text-align: center;
        color: #999;
        margin: 20px 0;
    }
    .search-label .weui-select {
        text-align: right;
        padding-left: 0px;
    }
    .search-box .weui-select {
        height: auto;
        line-height: 1.5;
    }
    .search-cover {
        display: flex;
        flex-direction: column;
    }
    .search-cover .cover {
        padding: 10px;
        padding-right: 0px;
    }
    .search-cover .cover img {
        width: 100px;
    }
    .tag-label {
        padding: 2px 10px;
        border-radius: 10px;
        margin-right: 10px;
    }
    .weui-media-box__title {
        color: #575757;
        margin-bottom: 5px;
    }
    .weui-media-box__desc {
        line-height: 1.6;
    }
    .offtitle .weui-media-box__title,
    .offtitle .weui-media-box__desc {
        color: #D1D1D1;
    }
    .box-but{
        display: flex;
        justify-content: space-between;
    }
    .box-but .weui-btn{
        width: 150px;
        line-height: 40px;
        margin-top: 0px;
        font-size: 15px;
    }
    .limin-table td,.limin-table th{
        text-align: center;
    }
</style>
<body>
	<div class="weui-btn_primary weui-header "> 
		<h1 class="weui-header-title">面料参数查询</h1>
	</div>
	
	<div class="weui-tab" id="t1" style="height:auto;">
	   <div class="weui-tab__panel">
			<div id="s0" class="weui-tab__content">
                <div class="search-box">
                    <div class="weui-cell">
                        <div class="weui-cell__hd search-label">编号</div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="text" name="fabric_code" placeholder="请输入编号">
                        </div>
                    </div>
					
					<div class="weui-cell">
					    <div class="weui-cell__hd search-label">产品名称</div>
					    <div class="weui-cell__bd">
					        <input class="weui-input" type="text" name="fabric_name" placeholder="请输入名称">
					    </div>
					</div>
					
					<div class="weui-cell">
					    <div class="weui-cell__hd search-label">供货编号</div>
					    <div class="weui-cell__bd">
					        <input class="weui-input" type="text" name="sup_code" placeholder="请输入编号">
					    </div>
					</div>
					
					<div class="weui-cell">
						<div class="weui-cell__hd search-label">供应商</div>
						<div class="weui-cell__bd">
							<select class="weui-select" id="supplier">
								<option value="">所有供应商</option>
								{volist name="supplier_list" id="s"}
								<option value="{$s.id}">{$s.sup_name}</option>
								{/volist}
							</select>
						</div>
					</div>
                
                    <div class="weui-cell weui-cell_vcode">
                        <div class="weui-cell__bd">
                            <button class="weui-btn weui-btn_primary" id="search-btn">搜索</button>
                        </div>
                    </div>
                </div>

            <!-- 结果输出区域 -->
            <div id="result-box" class="results-container">
                <table class="limin-table">
                    <thead>
                        <tr>
                            <th>业务</th>
                            <th>渠道商</th>
                            <th>供应号</th>
                            <th>色号</th>
                            <th>颜色</th>
                            <th>数量</th>
                        </tr>
                    </thead>
                    <tbody>
                        {volist name="limin_list" id="v"}
                        <tr>
                            <td>{$v.staff_name}</td>
                            <td>{$v.sup_name}</td>
                            <td>{$v.sup_code}</td>
                            <td>{$v.sup_color}</td>
                            <td>{$v.color_name}</td>
                            <td>
                                {if $v.unit == '块' || $v.unit == '样'}
                                    A4
                                {else /}
                                    {$v.count} {$v.unit}
                                {/if}
                            </td>
                        </tr>
                        {/volist}
                    </tbody>
                </table>
            </div>
            
            <!-- 上拉分页加载 -->
            <div id="loading" style="display:none; text-align:center;">加载中...</div>
        </div>
	</div>
</body>
{$LOAD_STYLE.bottom|raw}
<script type="text/javascript">
    let currentPage = 1;
    const limit = 20; // 每页显示数量
    let totalCount = 0; // 总记录数
    
	$(function(){
		$('#t1').tab({
			defaultIndex: 0,
			activeClass: 'tab-green',
			onToggle: function (index) {
			}
		})
	})

    $(document).ready(function(){
        // 初始化 ClipboardJS
        var clipboard = new ClipboardJS('.copybut');
    
        // 复制成功时的提示
        clipboard.on('success', function(e) {
            $.toast('复制成功！');
            e.clearSelection(); // 清除选中状态
        });
    
        // 复制失败时的提示
        clipboard.on('error', function(e) {
            $.toast('复制失败！', "cancel");
        });
        
        // 为每个带有 url 属性的元素添加点击事件
		$(document).on('click', '[data-url]', function () {
            url = $(this).attr('data-url'); // 获取 url 属性
            if (url) {
                // window.location.href = url; // 跳转到指定的 URL
				$('.info-iframe').attr('src',url)
            }
        });
        
        
        function loadResults(page, limit) {
            // 收集表单数据
            const formData = {
                fabric_code: $('input[name="fabric_code"]').val(),
				title: $('input[name="title"]').val(),
				sup_code: $('input[name="sup_code"]').val(),
                page: page,
                limit: limit
            };
			
			// 检查 #supplier 是否有值
			const sup_id = $('#supplier').val();
			if (sup_id) {
			    formData.sup_id = sup_id; // 如果有值，则添加到 formData
			}

            // 获取当前页面的 URL
            const url = new URL(window.location.href);
            url.searchParams.set('page', page); // 设置或添加 page 参数
            url.searchParams.set('limit', limit); // 设置或添加 limit 参数
            
            // 发送 AJAX 请求
            $.ajax({
                url: url.href, // 当前页面URL（或您要提交到的URL）
                type: 'POST', // 或者 'POST'
                data: formData,
                beforeSend: function() {
                    $('#loading').show();
                },
                success: function(response) {
                    // 更新总记录数
                    totalCount = response.count;
                    // 判断是否还有更多数据
                    
                    if((!response.data || response.data.length === 0) && response.count==0){
                        $('#result-box').append('<div class="no-data">没有找到相关数据</div>');
                        $(window).off('scroll'); // 停止监听滚动事件
					}else{
						// 假设response是一个包含数据的数组
						response.data.forEach(item => {
						    let url="{:U('Fabric/color',['id'=>''])}";						$('#result-box').append(`
						        <div class="weui-panel search-cover">
						            <div class='open-popup' data-target="#info">
										<div class="weui-cell">${item.is_change > 0 ? '<label class="tag-label f-white bg-red"> 改 </label>' : ''}<strong>  ${item.fabric_code}  # ${item.fabric_name}</strong></div>
                                        <div class="weui-cell"><strong>[ ${item.sup_name} ]  # ${item.sup_code}</strong></div>
										<div class="weui-cell tips">幅宽:${item.width}cm &nbsp;克重: ${item.weight}g</div>
										<div class="weui-cell tips"><p>成分: ${item.composition}</p></div>
                                        <div class="weui-cell tips"><p>纸管空差: ${item.tube}+${item.empty_diff}&nbsp;供：${item.sup_tube}+${item.sup_empty}-${item.return_diff}</p></div>
                                        <div class="weui-cell box-but">
                                            <button class="weui-btn weui-btn_default copybut" data-clipboard-text="${item.sup_code} # ${item.fabric_name}">复制</button>
                                            <a href="`+url+`${item.id}" class="weui-btn weui-btn_default">色卡</a>
                                        </div>
                                    </div>
						        </div>
						    `);
						});
						
						if (currentPage * limit >= totalCount) {
						    $('#result-box').append('<div class="no-data">没有更多数据可以加载</div>');
						    $(window).off('scroll'); // 停止监听滚动事件
						} else {
						    currentPage++; // 增加当前页面数
						}
					}
                },
                error: function(xhr, status, error) {
                    console.error('错误:', error);
                },
                complete: function() {
                    $('#loading').hide();
                }
            });
        }
    
        // 搜索按钮点击事件
        $('#search-btn').on('click', function(e) {
            e.preventDefault(); // 阻止默认提交
            $('#result-box').empty(); // 清空结果
            currentPage = 1; // 重置当前页
            loadResults(currentPage, limit); // 加载结果
        });
    
        // 上拉加载更多
        $(window).scroll(function() {
            if ($(document).height() - $(window).height() <= $(window).scrollTop() + 100) {
                loadResults(currentPage, limit);
            }
        });
    })
</script>
</html>